.gt-container
  box-sizing border-box
  font-size 16px
  -webkit-box-sizing border-box
  *
    box-sizing border-box
    -webkit-box-sizing border-box
  a.is--active
    color var(--theme-unimportant-2)
    pointer-events none
    &:hover
      background unset
      color var(--theme-unimportant-2)
  .hide
    display none !important
  .gt-svg
    position relative
    top -2px
    display inline-block
    width 1em
    height 1em
    vertical-align sub
    transition .3s
    svg
      width 100%
      height 100%
  .gt-ico
    display inline-block
  &.gt-ico-text
    margin-left .3125em
  .gt-header-controls-tip:hover
    color var(--theme-text-hover)
  .gt-ico-github
    position relative
    top 4px
    .gt-svg
      width 42px
      height 42px
      fill var(--theme-text)
      &:hover
        fill var(--theme-text-hover)
  .gt-spinner
    position relative
    &::before
      position absolute
      top 3px
      box-sizing border-box
      margin-top -.1875em
      margin-left -.375em
      width .75em
      height .75em
      border 1px solid var(--theme-text-hover)
      border-top-color var(--theme-highlight)
      border-radius 50%
      content ''
      animation gt-kf-rotate .6s linear infinite
      -webkit-box-sizing border-box
      -webkit-animation gt-kf-rotate .6s linear infinite
  .gt-loader
    position relative
    display inline-block
    width 1.75em
    height 1.75em
    border 1px solid var(--theme-unimportant)
    border-radius 50%
    font-style normal
    line-height 1.75em
    animation ease gt-kf-rotate 1.5s infinite
    -webkit-animation ease gt-kf-rotate 1.5s infinite
    &:before
      position absolute
      top 0
      left 50%
      display block
      margin-top -.1875em
      margin-left -.1875em
      width .375em
      height .375em
      border-radius 50%
      background-color var(--theme-unimportant)
      content ''
  .gt-avatar
    display inline-block
    width 3.125em
    height 3.125em
  .gt-avatar-github
    width 3em
    height 3em
    &:hover .gt-svg
      fill var(--theme-text-hover)
  .gt-btn
    &:hover
      border 1px solid var(--theme-border)
      background-color var(--theme-bg-soft-hover)
      color var(--theme-subcolor)
      transition .3s
    &.is--disable
      opacity .5
      cursor not-allowed
  .gt-btn-text
    font-weight 400
  .gt-btn-loading
    position relative
    display inline-block
    margin-left .5em
    width .75em
    height 1em
    vertical-align top
  .gt-btn-login
    margin-right 0
  .gt-error
    margin .625em
    color var(--theme-stress)
    text-align center
  .gt-initing
    padding 1.25em 0
    text-align center
  .gt-initing-text
    margin .625em auto
    font-size 92%
  .gt-no-init
    padding 1.25em 0
    text-align center
  .gt-link
    border-bottom 1px dotted var(--theme-highlight)
  .gt-meta
    position relative
    z-index 10
    margin 1.25em 0
    padding 1em 0
    border-bottom 1px solid var(--theme-unimportant-2)
    font-size 1em
    &:after
      clear both
  .gt-counts
    margin 0 .625em 0 0
  .gt-user
    float right
    margin 0
    font-size 92%
    .gt-ico
      margin 0 0 0 .3125em
      svg
        fill var(--theme-text)
  .gt-user-pic
    margin-right .5em
    width 16px
    height 16px
    vertical-align top
  .gt-user-inner
    display inline-block
    .gt-ico-arrdown .gt-svg
      transform rotate(180deg)
    &.is--poping .gt-ico-arrdown .gt-svg
      transform rotate(0)
  .gt-version
    color var(--theme-text)
    font-size small
  .gt-copyright
    margin 0 .7em .5em
    padding-top .5em
    border-top 1px solid var(--theme-unimportant-2)
  .gt-link-project
    margin-right 1px
  .gt-popup
    position absolute
    top 2.4em
    right 0
    display inline-block
    padding .625em 0
    border 1px solid var(--theme-unimportant-2)
    background var(--theme-background)
    font-size .875em
    .gt-action
      position relative
      display block
      margin .3em .7em
      text-decoration none
      letter-spacing 1px
      &.is--active
        &:before
          position absolute
          top .6em
          left -.4em
          width .25em
          height .25em
          background var(--theme-highlight)
          content ''
  .gt-header
    position relative
    display -webkit-box
    display -ms-flexbox
    display flex
  .gt-header-comment
    flex 1
    margin-left 1.25em
    -webkit-box-flex 1
    -ms-flex 1
  .gt-header-textarea:hover
    border 1px solid var(--theme-border)
    background-color var(--theme-bg-soft-hover)
  .gt-header-preview
    overflow auto
    padding .75em
    min-height 72px
    width 100%
    border 1px solid var(--theme-border-light)
    border-radius 5px
    background-color var(--theme-bg-soft)
    transition .3s
    &:hover
      padding .75em
      border 1px solid var(--theme-border)
      border-radius 5px
      background-color var(--theme-bg-soft-hover)
    p
      width fit-content
  .gt-header-controls
    position relative
    margin .75em 0 0
    &:after
      clear both
  &.gt-input-focused
    position relative
    &:after
      position fixed
      top 0
      right 0
      bottom 0%
      left 0
      z-index 9999
      background var(--theme-background)
      content ''
      opacity .6
    .gt-header-comment
      z-index 10000
  &:after
    transition .3s
  .gt-comments
    padding-top 1.25em
    padding-bottom 1.25em
  .gt-comments-null
    text-align center
  .gt-comments-controls
    margin 1.25em 0
    text-align center
  .gt-comment
    position relative
    display -webkit-box
    display -ms-flexbox
    display flex
    padding .625em 0
  .gt-comment-content
    flex 1
    overflow auto
    margin-left 1.25em
    padding .75em 1em
    padding-left 20px
    border-left #fe2 solid 3px
    background-color var(--theme-bg-soft)
    color var(--theme-text)
    transition .3s
    transition .3s
    -webkit-box-flex 1
    -ms-flex 1
    &:hover
      border-color var(--theme-highlight)
      background-color var(--theme-bg-soft-hover)
    &::before
      background linear-gradient(180deg, transparent, var(--theme-bg-trans0))
    &::after
      background var(--theme-bg-trans0)
    p
      color var(--theme-text-light)
  .gt-comment-block-1
    float right
    width 2em
    height 1.375em
  .gt-comment-block-2
    float right
    width 4em
    height 1.375em
  .gt-comment-text, .gt-comment-date
    margin-left .5em
    color var(--theme-text)
  .gt-comment-body
    .email-hidden-toggle a
      display inline-block
      padding 0 9px
      height 12px
      border-radius 1px
      vertical-align middle
      font-weight 600
      font-size 12px
      line-height 6px
    .email-hidden-reply
      display none
      white-space pre-wrap
      .email-signature-reply
        margin 15px 0
        padding 0 15px
        border-left 4px solid var(--theme-border-light)
        color var(--theme-unimportant-2)
      &.expanded
        display block

a
  .gt-ico
    fill var(--theme-highlight)
  &:hover .gt-ico
    fill var(--theme-text-hover)

@media (max-width 479px)
  .gt-container .gt-avatar
    width 2em
    height 2em
  .gt-container .gt-avatar-github
    width 1.875em
    height 1.875em
  .gt-container .gt-header-comment
    margin-left .875em
  .gt-container .gt-header-controls
    margin 0
  .gt-container .gt-header-controls-tip
    display none
  .gt-container .gt-header-controls .gt-btn
    float none
    margin .75em 0 0
    width 100%
  .gt-container .gt-comment-content
    margin-left .875em
    padding .625em .75em

.gt-container
  .gt-avatar img
    width 100%
    height auto
    border-radius 50%
  .gt-btn
    display inline-block
    padding .75em 1.25em
    outline none
    border 1px solid var(--theme-border-light)
    border-radius 5px
    background-color var(--theme-bg-soft)
    color var(--theme-text-light)
    white-space nowrap
    font-size .75em
    line-height 1
    transition .3s
  .gt-header-textarea
    display block
    box-sizing border-box
    padding .75em
    min-height 5.125em
    max-height 15em
    width 100%
    outline none
    border 1px solid var(--theme-border-light)
    border-radius 5px
    background-color var(--theme-bg-soft)
    color var(--theme-text-light)
    word-wrap break-word
    font-size .875em
    font-family 'JetBrains Mono', 'Microsoft YaHei', sans-serif
    resize vertical
    transition .3s
    -webkit-box-sizing border-box
  .gt-header-controls-tip
    vertical-align sub
    font-size .875em
  .gt-header-controls .gt-btn
    float right
    margin-left 1.25em
  &:after
    position fixed
    top 0
    right 0
    bottom 100%
    left 0
    content ''
    opacity 0
  .gt-comment-header
    position relative
    margin-bottom .5em
    font-size .875em

.gt-container .gt-meta:before, .gt-container .gt-meta:after, .gt-container .gt-header-controls:before, .gt-container .gt-header-controls:after
  display table
  content ' '

.gt-comment-like, .gt-comment-reply
  fill var(--theme-highlight)
  &:hover
    fill var(--theme-text-hover)

.gt-container .gt-comment-like
  height 1.375em

.gt-container .gt-comment-edit, .gt-container .gt-comment-reply
  position absolute
  height 1.375em

.gt-container .gt-comment-edit:hover
  top 0

.gt-container .gt-comment-edit, .gt-container .gt-comment-reply
  top 0
  right 0

@keyframes gt-kf-rotate
  0%
    transform rotate(0)
    -webkit-transform rotate(0)
  100%
    transform rotate(360deg)
    transform rotate(360deg)
    -webkit-transform rotate(360deg)
    -webkit-transform rotate(360deg)

@keyframes gt-kf-rotate
  0%
    transform rotate(0)
    -webkit-transform rotate(0)
  100%
    transform rotate(360deg)
    transform rotate(360deg)
    -webkit-transform rotate(360deg)
    -webkit-transform rotate(360deg)
